<template>
  <div>
    <page-header />
    <div class="book-main">
      <div class="search-div">
        <search-book />
      </div>
      <div class="line-spector" />
    </div>
    <div class="book-filter-class">
      <book-filter />
    </div>
    <book-list />
    <right-bottom-fixd />
  </div>
</template>
<script>
import PageHeader from '@/components/PageHeader'
import RightBottomFixd from '@/components/RightBottomFixd'
import SearchBook from '@/components/SearchBook'
import BookList from '@/components/BookList'
import BookFilter from '@/components/BookFilter'
import { initBookPageFormAndSearchBookForm } from '@/common/common'

export default {
  components: {
    PageHeader,
    RightBottomFixd,
    SearchBook,
    BookList,
    BookFilter
  },
  data() {
    return {
      searchStr: ''
    }
  },
  created() {
    this.checkShowBooks()
  },
  methods: {
    getSearchStr() {
      const searchStr = this.$route.params.searchStr
      this.searchStr = searchStr
    },
    checkShowBooks() {
      if (this.$store.getters.showBooks.length <= 0) {
        initBookPageFormAndSearchBookForm()
        this.$store.dispatch('book/getList')
      }
    }
  }

}
</script>
<style lang="scss" scoped>
.book-main {
  padding: 0 80px;
  // margin: 0;
  .search-div {
    display: flex;
    justify-content: center;
  }
  .line-spector {
    margin-top: 20px;
    border-top: 1px solid lightblue;
  }
}
.book-filter-class {
  margin: 20px 40px -35px 40px;
}
</style>
